<template>
  <div class="case-page">
    <!-- 医院名称 -->
    <h1 class="hospital-name" style="margin-bottom: 0px">{{ info.title }}</h1>
    <h1 class="hospital-name">发药明细单</h1>

    <!-- 患者基础信息 -->
    <div class="patient-info">
      <div class="info-item"><span>姓名：</span>{{ patient.name }}</div>
      <div class="info-item"><span>性别：</span>{{ patient.gender }}</div>
      <div class="info-item" style="width: 28%">
        <span>年龄：</span>{{ patient.age }}
      </div>
      <div class="info-item"><span>电话：</span>{{ patient.phone }}</div>
      <div class="info-item"><span>科室：</span>{{ patient.department }}</div>
      <div class="info-item"><span>医生：</span>{{ patient.doctor }}</div>
      <div class="info-item" style="width: 28%">
        <span>诊号：</span>{{ patient.visitId }}
      </div>
      <div class="info-item"><span>类型：</span>{{ patient.type }}</div>
    </div>

    <!-- 病历核心信息 -->
    <div class="table-info">
      <div class="table-info-list">
        <table>
          <thead>
            <tr>
              <th>项目</th>
              <th>类型</th>
              <th>数量</th>
              <th>单位</th>
              <th>单价</th>
              <th style="width: 5%;">金额</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>血常规</td>
              <td>中药</td>
              <td>1</td>
              <td>g</td>
              <td>10.00</td>
              <td style="width: 5%;">10.00</td>
            </tr>
            <tr>
              <td>血常规</td>
              <td>中药</td>
              <td>1</td>
              <td>g</td>
              <td>10.00</td>
              <td style="width: 5%;">10.00</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>


    <!-- 底部信息 -->
    <div class="footer">
      <div class="info-item"><span>金额：</span>{{ footer.amount }}</div>
      <div class="info-item">
        <span>完诊时间：</span>{{ footer.finishTime }}
      </div>
      <div
        class="info-item"
        style="margin-left: auto; margin-right: 0; text-align: right"
      >
        <span>打印时间：</span>{{ footer.printTime }}
      </div>
    </div>
    <!-- 底部信息 -->
    <div class="footer2">
      <div class="info-item"><span>地址：</span>{{ info.address }}</div>
      <div class="info-item" style="margin-left: auto; text-align: right">
        <span>电话：</span>{{ info.phone }}
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';

export default defineComponent({
  name: 'CasePage',
  props:['info'],
  setup() {
    // 病历数据（模拟从后端获取，此处为静态数据）
    const hospitalName = 'XXX医院';
    const patient = reactive({
      name: '张三',
      gender: '女',
      age: '23岁10月',
      phone: '17606523333',
      department: '内科',
      doctor: '张三三三',
      visitId: 'ZH20210101001',
      type: '初诊 普通',
      mainComplaint: '咳嗽',
      currentHistory: '无',
      pastHistory: '无',
      allergyHistory: '青霉素过敏',
      finalDiagnosis: '最终诊断',
      advice: [
        '多喝水多喝水多喝水多喝水多喝水',
        '多喝水多喝水多喝水多喝水多喝水',
      ],
    });
    const footer = reactive({
      amount: '100.00',
      finishTime: '2022-01-01 12:12:12',
      printTime: '2022-01-01 12:12:12',
      address: '浙江省杭州市余杭区设么路1000号',
      phone: '00-12345678',
    });

    return {
      hospitalName,
      patient,
      footer,
    };
  },
});
</script>

<style scoped lang="scss">
.case-page {
  font-family: Arial, sans-serif;
  padding: 34px 30px;background-color: #fff;
  height: 100%;
}

.hospital-name {
  text-align: center;
  font-size: 16px;
  margin-bottom: 20px;
}

.patient-info,
.footer,
.footer2 {
  display: flex;
  flex-wrap: wrap;
}
.patient-info,
.case-info {
  border-bottom: 2px solid rgba(0, 0, 0, 0.9);
  margin-bottom: 10px;
  padding-bottom: 10px;
}
.info-item {
  font-size: 12px;
  width: 24%;
  font-weight: 400;
  font-size: 12px;
  color: #000000;
  line-height: 22px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.footer {
  .info-item {
    margin-right: 30px;
    width: auto;
  }
}
.footer2 {
  .info-item {
    width: 50%;
  }
}
.table-info {
  width: 100%;
  margin: 20px 0;
  padding:0 0 20px 0;
  border-bottom: 2px solid rgba(0, 0, 0, 0.9);
  .table-info-title {
    width: 30px;
  }
  .table-info-list {
    width: calc(100% - 50px);
    table {
      width: 100%;
      font-size: 12px;
      text-align: left;
      td {
        width: 18%;
        line-height: 22px;
      }
      th {
        width: 18%;
        line-height: 22px;
        font-weight: 400;
      }
    }
  }
}
.case-info {
  .info-item {
    display: flex;
    width: 100%;
    span {
      width: 50px;
      display: block;
    }
  }
}
.info-item span {
  text-align: justify;
  text-justify: inter-character;
  text-align-last: justify;
}

ul {
  list-style: none;
  padding: 0;
}
</style>
